<template>
  <!-- 表格 -->
  <div class="table-bg">
    <el-table :data="menulist" v-loading="loading" row-key="id" :indent="10"
              border>
      <el-table-column label="菜单名称"
                       prop="title"></el-table-column>
      <el-table-column label="菜单地址"
       width="180px"
                       prop="path"></el-table-column>
      <el-table-column label="权限标识"
          width="180px"
                       prop="mark"></el-table-column>
      <el-table-column label="图标"
       width="80px"
       align="center"
                       prop="icon">
        <template slot-scope="{row}">
            <svg-icon class-name="size-icon" :icon-class="row.icon" />
        </template>
                       </el-table-column>
      <el-table-column label="组件路径"
                       prop="component"></el-table-column>
      <el-table-column label="类型"
      align="center"
                       prop="type">
        <template slot-scope="{row}">
          <el-tag size="small" v-if="row.type*1===1" type="primary">菜单</el-tag>
          <el-tag size="small" v-else  type="warning">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否显示"
                      align="center"
                       prop="is_show">
        <template slot-scope="{row}">
          <el-switch size="mini" :value="row.is_show" :active-value="1" :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="{row}">
          <el-button @click="$emit('edit',{...row})"
                     icon="el-icon-edit"
                     type="primary"
                     circle
                       v-permission="'sys_menu@update'"
                     size="small"></el-button>
          <el-button v-if="row.type===1" @click="$emit('childadd',{...row})"
                     icon="el-icon-plus"
                     type="warning"
                     circle
                     v-permission="'sys_menu@add'"
                     size="small"></el-button>
          <el-button @click="del(row.id)"
                     type="danger"
                     icon="el-icon-delete"
                     circle
                     v-permission="'sys_menu@del'"
                     size="small"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { delData } from '@/api/system/menu'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'vList',
  data () {
    return {
      loading: false
    }
  },
  created () {
    if (!this.menulist.length) {
      this.loading = true
      this.getAllMenuList().then(_ => {
        this.loading = false
      })
    }
  },
  computed: {
    ...mapGetters('menu', ['menulist'])
  },
  methods: {
    ...mapActions('menu', ['getAllMenuList']),
    ...mapActions('user', ['getUserInfo']),
    async del (id) {
      try {
        await this.$confirm(this.$t('base.delConfimText'), {
          confirmButtonText: this.$t('base.confirm'),
          cancelButtonText: this.$t('base.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return this.$message.info(this.$t('base.cancelText'))
      }
      await delData({ id })
      this.$message.success(this.$t('base.delSuccessText'))
      this.$emit('update-list')
      this.getAllMenuList() // 更新仓库中菜单列表
      this.getUserInfo() // 更新用户菜单信息
    }
  }
}
</script>
<style scoped>
</style>
